<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>连接数据库</title>
    <link rel="icon" type="image/x-icon" href="/icon/favicon.ico">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/css/normalize.css">
    <!-- 引入组件库 -->
    <script src="/js/element.js"></script>

    <link rel="stylesheet" href="/css/index.css">

</head>
<body>
<div id="app">
    <div class="container">
        <div class="action-items">
            <el-tooltip class="item" effect="dark" content="前往Gitee" placement="bottom">
                <a href="https://gitee.com/geqian618/DbSnap">
                    <img src="/icon/svg/gitee.svg" width="35">
                </a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="前往Github" placement="bottom">
                <a href="https://github.com/geqian618/DBSnap">
                    <img src="/icon/svg/github.svg" width="35">
                </a>
            </el-tooltip>

            <el-popover placement="bottom" width="300" trigger="hover">
                <img src="/images/赞赏码.jpg" width="300">
                <img slot="reference" src="/icon/svg/admire.svg" width="35">
            </el-popover>

        </div>
        <div class="icon-grid">
            <div v-if="item.developed" class="icon-item unselectable" @click="selectDatabase(item)"
                 v-for="(item, index) in options"
                 :key="index">
                <img :src="item.icon" width="100" height="100" alt=""/>
                <span>{{ item.label }}</span>
            </div>
        </div>
    </div>

    <el-dialog v-loading="loading"
               element-loading-text="正在加载中..."
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)"
               width="600px"
               title="数据源"
               @close="closeDialog"
               :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item v-show="form.hostVisible" label="主机" :label-width="formLabelWidth" prop="host">
                <el-input v-model="form.host" placeholder="请输入主机"></el-input>
            </el-form-item>

            <el-form-item v-show="form.portVisible" label="端 口" :label-width="formLabelWidth" prop="port">
                <el-input v-model="form.port" placeholder="请输入端口号"></el-input>
            </el-form-item>

            <el-form-item v-show="form.databaseVisible" :label="form.label" :label-width="formLabelWidth"
                          prop="database">
                <el-input v-model="form.database" :placeholder="'请输入'+ form.label"></el-input>
            </el-form-item>

            <el-form-item v-show="form.usernameVisible" label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item v-show="form.passwordVisible" label="密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script th:inline="javascript">
    // 创建一个新的 Vue 实例
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            appreciationCodeVisible: false,
            formLabelWidth: '120px',
            loading: false,
            form: {
                label: '数据库',
                databaseType: '',
                host: '127.0.0.1',
                hostVisible: true,
                port: 0,
                portVisible: true,
                username: '',
                usernameVisible: true,
                password: '',
                passwordVisible: true,
                database: '',
                databaseVisible: true,
            },
            rules: {
                host: [
                    {required: true, message: '主机不能为空', trigger: 'blur'}
                ],
                port: [
                    {required: true, message: '端口不能为空', trigger: 'blur'}
                ],
                database: [
                    {required: true, message: '数据不能为空', trigger: 'blur'}
                ],
            },
            options: [],
        },
        mounted() {

            this.getDatabaseConfig()

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Enter') {
                    this.submitForm('ruleForm')
                }
            });
        },
        methods: {
            selectDatabase(item) {
                this.dialogFormVisible = true;
                this.form.username = ''
                this.form.password = ''
                this.form.database = ''
                this.form.databaseType = item.value;
                this.form.port = item.defaultPort || 0
                this.form.hostVisible = item.hostVisible !== undefined ? item.hostVisible : true
                this.form.portVisible = item.portVisible !== undefined ? item.portVisible : true
                this.form.databaseVisible = item.databaseVisible !== undefined ? item.databaseVisible : true
                this.form.usernameVisible = item.usernameVisible !== undefined ? item.usernameVisible : true
                this.form.passwordVisible = item.passwordVisible !== undefined ? item.passwordVisible : true
                if (item.value === 'oracle') {
                    this.form.label = 'SID'
                } else if (item.value === 'sqlite3') {
                    this.form.label = '数据库文件'
                } else if (item.value === 'derby' && item.value === 'h2') {
                    this.form.label = '数据库路径'
                } else {
                    this.form.label = '数据库'
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.connection()
                    } else {
                        return false;
                    }
                });
            },
            closeDialog() {
                this.$refs['ruleForm'].resetFields();
            },
            connection() {
                this.loading = true
                axios.post('/dataSource/connection', this.form).then(res => {
                    if (res.data.code === 200) {
                        this.showMessage('success', res.data.message)
                        setTimeout(() => {
                            window.location.href = '/document';
                        }, 500)
                    } else {
                        this.showMessage('error', res.data.message)
                    }
                    this.loading = false
                }).catch(err => {
                    this.showMessage('error', err.message)
                    this.loading = false
                })
            },
            showMessage(type, message) {
                this.$message({
                    message: message,
                    type: type,
                });
            },
            getDatabaseConfig() {
                axios.get('/database/config').then(res => {
                    if (res.data.code === 200) {
                        this.options = JSON.parse(res.data.data);
                    } else {
                        this.showMessage('error', res.data.message)
                    }
                }).catch(err => {
                    this.showMessage('error', err.message)
                })
            }
        }
    });
</script>
</body>
</html>